import React from "react";
import { Link } from "react-router-dom";
import styles from "./index.module.scss";
import { Button } from "antd";
import { useNavigate } from "react-router-dom";

const index = () => {
  const ButtonA = Button as any;
  const navigate = useNavigate();
  const fallback = () => {
    navigate("/");
  };
  const listMode = [
    { no: "1" },
    { no: "2" },
    { no: "3" },
    { no: "4" },
    { no: "5" },
    { no: "6" },
  ];

  return (
    <div className={styles.appContent}>
      <div className={styles.practiceHeader}>
        <ButtonA type="primary" className={styles.button} onClick={fallback}>
          返回
        </ButtonA>
        <div className={styles.title}>
          <span>练习模式</span>
        </div>
      </div>
      <div className={styles.centerContent}>
        {listMode.map((item: any, index: number) => {
          return (
            <div className={styles.box} key={index}>
              <div className={styles.images}>
                <Link to={`/level?index=${index + 1}`}>关卡{index + 1}</Link>
              </div>
            </div>
          );
        })}
      </div>
      <div className={styles.practiceBottom}>
        <div className={styles.leftArrow}></div>
        <div className={styles.begining}></div>
        <div className={styles.rightArrow}></div>
      </div>
    </div>
  );
};

export default index;
